<template>
<page>
  <head title="Details">
    <div class="rightBox" v-if="!isWeb" slot="right" @click="shareGoods">
      <img class="sahreImg" src="root:img/share.png" alt />
    </div>
  </head>
  <scroller class="scroller">
    <div class="goods-detail">
      <slider class="slider" interval="3000" auto-play="true" v-if="goodInfo.thumb_url">
        <div class="frame" v-for="(item,index) in goodInfo.thumb_url.split(',')" :key="index">
          <image
            @click="showDetail(goodInfo.thumb_url,index)"
            class="itemImg"
            :src="item"
            resize="cover"
          />
        </div>
        <indicator class="indicators1"></indicator>
      </slider>
    </div>
    <div class="mesBox">
      <div class="info-box goods_top">
        <div class="top_left" v-if="goodInfo.price">
          <text class="priceSymbol">AU$</text>
          <text class="goods-info-price">{{goodInfo.price}}</text>
          <text class="goods-old_price" v-if="goodInfo.old_price-0!==0">{{goodInfo.old_price}}</text>

          <text class="gap10"></text>
        </div>
        <div class="collections">
          <image class="keepImg" src="root:img/keep.png" />
          <text class="collecIconTxt">{{goodInfo.collection>0?goodInfo.collection:0}}</text>
          <image class="kanImg" src="root:img/kanguo.png" />
          <text class="collecIconTxt">{{goodInfo.mark_num>0?goodInfo.mark_num: 0}}</text>
        </div>
      </div>
      <div class="textAtea">
        <text class="Brandnew" v-if="goodInfo.label&&goodInfo.label.indexOf('new') != -1">Brand new</text>
        <text
          class="Brandnew"
          v-if="goodInfo.label&&goodInfo.label.indexOf('Local') != -1"
        >Local pickup supported</text>
        <text
          class="Brandnew"
          v-if="goodInfo.label&&goodInfo.label.indexOf('Free') != -1"
        >Free delivery</text>
      </div>
      <div class="locationBxo">
        <text class="goodInfo-title">{{goodInfo.title}}</text>
        <text class="location" v-if="goodInfo.two_location">{{goodInfo.two_location}}</text>
      </div>
    </div>
    <div class="detailBox">
      <text class="description">Description</text>
      <text class="goods-info-title">{{goodInfo.content}}</text>
    </div>
    <div class="imgDemo">
      <!-- 用户信息 -->
      <div
        class="userInfo"
        @click="gonext('root:app/goods/userCenter.js',{id:goodInfo.users_id,type:goodInfo.type})"
      >
        <image class="userAvator" v-if="goodInfo.type=='2'" :src="goodInfo.headimgurl" />
        <image class="userAvator" v-if="goodInfo.type=='1'" src="root:img/officeIcon.png" />

        <div class="userCenter">
          <div class="row acenter" v-if="goodInfo.type=='2'">
            <text class="userName">{{goodInfo.nickname}}</text>
            <!-- <text class="credit">{{goodInfo.nickname}}</text> -->
          </div>
          <div class="row acenter" v-if="goodInfo.type=='1'">
            <text class="userName">GIV</text>
            <image class="officeIcon" src="root:img/office.png" />
            <text class="tagoffice">Platform</text>
          </div>
          <div class="row">
            <text class="row_title">{{goodInfo.create_time|formatDateTime}}</text>
            <!-- <text class="row_num">50</text> -->
          </div>
        </div>
      </div>

      <!-- 商品主图轮播 -->
    </div>
    <div class="moreRelate">
      <text class="RelatedT">Related</text>
      <div class="recontent">
        <div
          class="reitem"
          v-for="(item,index) in shopList"
          :key="index"
          v-if="item.users_id!=userId||!userId"
        >
          <image
            class="goodsImga"
            :src="item.thumb"
            @click="gonext('root:app/goods/goods2.js',{id:item.id})"
          />
          <div class="contentBox">
            <text class="goodsTitle2">{{item.title}}</text>
            <div class="priceInfo">
              <div class="leftInfo">
                <text class="symbol">AU$</text>
                <text class="money">{{item.price}}</text>
                <!-- <text class="reduce" v-if="item.old_price-0!==0">{{item.old_price}}</text> -->
                <!-- <text class="shopType">NEW</text> -->
              </div>
              <div class="leftInfo">
                <!-- <text class="iconfont shopIcon">&#xe64c;</text> -->
                <!-- <text class="iconfont shopIcon">&#xe634;</text> -->
                <!-- <text class="iconfont shopIcon">&#xe607;</text> -->
              </div>
            </div>
          </div>
        </div>
        <div class="reitemS"></div>
      </div>
    </div>
  </scroller>
  <!-- 底部菜单 -->
  <div class="footer">
    <div class="foot_icons">
      <div class="iconsbox boxright" @click="toCollection">
        <text class="iconfont textIcon">{{goodInfo.is_collection==0?"&#xe634;":"&#xe60f;"}}</text>
        <text class="boxtext">Collection</text>
      </div>
      <div class="iconsbox contact boxright" @click="showMask=true">
        <text class="iconfont textIcon contactIcon">&#xe600;</text>
        <text class="boxtext contactTxt">Contact seller</text>
      </div>
    </div>

    <div class="btnBox">
      <!-- <text class="buy" @click="isBuy(goodId)">Buy It Now</text> -->
    </div>
  </div>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
  <!-- 图片预览 -->
  <ImgPreview ref="preview" @hidePreview="hidePreview" />
  <wxc-mask
    height="500"
    width="600"
    border-radius="0"
    duration="200"
    mask-bg-color="#FFFFFF"
    :has-animation="true"
    :has-overlay="true"
    :show-close="true"
    :show="showMask"
    @wxcMaskSetHidden="showMask=false"
  >
    <div class="boxcontact" @click="e=>e.stopPropagation()">
      <text v-if="goodInfo.contact_phone" class="boxTitle">Phone</text>
      <text class="boxVal">{{goodInfo.contact_phone}}</text>
      <div class="gap10"></div>
      <text v-if="goodInfo.contact_emails" class="boxTitle">Email</text>
      <text class="boxVal">{{goodInfo.contact_emails}}</text>
    </div>
  </wxc-mask>
</page>
</template>

<script>
const keepChange = new BroadcastChannel("keepChange");
import { WxcMask } from "weex-ui";
import {
  get_goods_info,
  add_goods_collection,
  del_goods_collection,
  get_goods_list,
  get_goods_option
} from "../../mixin/ajax.js";
import asCore from "../../mixin/core";

export default {
  components: { WxcMask },
  data() {
    return {
      showPage: false,
      goodId: "",
      userId: "",
      //是否显示遮罩层
      showMask: false,
      number: 1,
      shwow: false,
      //轮播图下标
      currentSwiper: 0,
      shopList: [], //导航条锚点
      selectAnchor: 0, //选中锚点
      serviceClass: "", //服务弹窗css类，控制开关动画
      specClass: "", //规格弹窗css类，控制开关动画
      shareClass: "", //分享弹窗css类，控制开关动画
      // 商品信息
      goodInfo: {
        thumb_url: "",
        subtitle: "",
        price: "",
        old_price: "",
        type: "", // 0 自营商品 1 平台二手商品 2 用户发布商品
        is_collection: "",
        users_id: ""
      },
      selectSpec: null, //选中规格
      isKeep: false, //收藏
      //商品描述html
      descriptionStr: ""
    };
  },

  created() {
    asCore.getBsessionid(userId => {
      this.userId = userId;
      get_goods_list(
        {
          users_id: "",
          keywords: "",
          categoryid: "",
          type: "2",
          status: "1",
          page: 1
        },
        (res, flag) => {
          if (flag) {
            if (res.code == "200") {
              this.shopList = res.data.list;
            } else {
              this.toast(res.message);
            }
          }
        }
      );
    });
  },

  methods: {
    onLoad(param) {
      if (param && param.param) {
        return false;
      }

      if (param && param.id) {
        this.goodId = param.id;
        this.getGoodInfo();
      }
      var page = weex.requireModule("page");
      page.enableBackKey(false);
      page.setBackKeyCallback(() => {
        if (this.showPage) {
          this.hidePreview();
        } else {
          this.back();
        }
      });
    },
    gonext(url, parmar) {
      if (!this.userId) {
        this.push("root:app/login/login.js");
        return false;
      }
      this.push(url, parmar);
    },
    shareGoods() {
      let sys = weex.requireModule("sysShare");
      sys.share({
        type: "txt",
        content:
          "https://www.empirise.com/mall/public/web/h5/#/app/goods/goods2.js?id=" +
          this.goodId
      });
    },
    // 推荐商品
    getGoodInfo() {
      get_goods_info(
        {
          users_id: this.userId,
          id: this.goodId
        },
        (res, flag) => {
          if (flag) {
            if (res.code == "200") {
              this.goodInfo = res.data;
              var pref = weex.requireModule("storage");
              pref.setItem("goodsInfoStatic", JSON.stringify(res.data));
            }
          }
        }
      );
    },
    showDetail(list, index) {
      this.showPage = true;
      this.$refs.preview.initPage(list.split(","), index);
    },
    hidePreview() {
      this.showPage = false;
      this.$refs.preview.hidePage();
    },
    confirm() {
      this.push("root:app/order/confirmation.js");
    },
    // 客服
    toChat() {
      this.push("root:app/msg/chat.js");
    },
    add() {
      if (this.number < 2) {
        this.number++;
      }
    },
    sub() {
      if (this.number > 1) {
        this.number--;
      }
    },
    sum(e) {
      if (e.value > 0 && e.value < 2) {
        this.number = e.value;
      }
    },
    isBuy(goodId) {
      if (!this.userId) {
        this.push("root:app/login/login.js");
        return false;
      }
      this.push("root:app/order/confirmation.js", { id: goodId });
    },
    toCart() {
      // this.push("root:app/main/cart.js");
    },

    hideShare() {
      this.shareClass = "hide";
      setTimeout(() => {
        this.shareClass = "none";
      }, 150);
    },
    //收藏
    toCollection() {
      // this.isKeep = this.isKeep ? false : true;
      if (!this.userId) {
        this.push("root:app/login/login.js");
        return false;
      }
      if (this.goodInfo.is_collection == 0) {
        add_goods_collection(
          {
            users_id: this.userId,
            goods_id: this.goodId
          },
          (res, flag) => {
            if (flag) {
              this.toast(res.message);
              if (res.code == 200) {
                // this.goodInfo.is_collection == 1;
                this.$set(this.goodInfo, "is_collection", 1);
                keepChange.postMessage("update");
              }
            }
          }
        );
      } else {
        del_goods_collection(
          {
            users_id: this.userId,
            goods_id: this.goodId
          },
          (res, flag) => {
            if (flag) {
              this.toast(res.message);
              if (res.code == 200) {
                this.$set(this.goodInfo, "is_collection", 0);
                keepChange.postMessage("update");
              }
            }
          }
        );
      }
    }
  }
};
</script>

<style scoped>
.rightBox {
  align-items: center;
  flex-direction: row;
  justify-content: center;
  flex: 1;
}
.rightBox:active {
  background-color: #000;
}
.sahreImg {
  width: 43px;
  height: 43px;
}
.iconfont {
  font-family: iconfont;
}

.scroller {
  flex: 1;
  background-color: #f2f2f2;
  width: 750px;
}

.row {
  flex-direction: row;
}
.boxcontact {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.boxTitle {
  font-size: 28px;
}
.gap10 {
  height: 50px;
}
.boxVal {
  font-size: 44px;
  margin-top: 10px;
  font-weight: 800;
}
.recontent {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 30px;
  width: 698px;
  margin-left: 26px;
}
.locationBxo {
  width: 750px;
  padding-right: 32px;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
}
.location {
  font-size: 24px;
  color: #666;
}
.reitem {
  height: 516px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 10px;
  /* justify-content: space-between; */
}

.reitemS {
  width: 336px;
}

.goodsImga {
  width: 336px;
  height: 336px;
}

.contentBox {
  width: 336px;
  padding: 0 20px;
}

.goodsTitle {
  font-size: 20px;
  height: 56px;
  line-height: 28px;
  margin-top: 12px;
  color: #1e1e1e;
  text-overflow: ellipsis;
  lines: 2;
}

.goodsTitle2 {
  font-size: 26px;
  height: 74px;
  line-height: 37px;
  margin-top: 16px;
  color: #1e1e1e;
  text-overflow: ellipsis;
  lines: 2;
}

.priceInfo {
  margin-top: 20px;
  flex-direction: row;
  justify-content: space-between;
}

.leftInfo {
  flex-direction: row;
  align-items: flex-end;
}

.symbol {
  color: red;
  margin-bottom: 5px;
  margin-right: 5px;
}

.money {
  color: red;
  font-size: 32px;
  font-weight: bold;
  margin-right: 5px;
}

.reduce {
  color: red;
  margin-right: 5px;
}

.shopType {
  color: red;
}

.shopIcon {
  font-size: 32px;
  margin-left: 10px;
}

.acenter {
  align-items: center;
}

.imgDemo {
  background-color: #fff;
  margin-top: 20px;
}

.moreRelate {
  background-color: #f2f2f2;
}

.RelatedT {
  color: #ba8833;
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  margin: 32px 0;
}

.goods-detail {
  /* background-color: #f5f5f5; */
  padding: 0;
}

.swiper-box {
  position: relative;
  width: 750px;
  height: 800px;
  background-color: #f5f5f5;
}

.slider {
  width: 750px;
  height: 400px;
  position: relative;
}

.frame {
  height: 400px;
}

.itemImg {
  width: 750px;
  height: 400px;
}
.mesBox {
  margin-top: 20px;
  padding: 20px 0;
  background-color: #fff;
}
.gap10 {
  margin: 0 5px;
}
.keepImg {
  width: 21px;
  height: 21px;
  margin-right: 8px;
}
.kanImg {
  width: 25px;
  height: 17px;
  margin-left: 24px;
  margin-right: 8px;
}
.indicators1 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  width: 686px;
  height: 30px;
  item-color: #ddd;
  item-selected-color: #ba8833;
  item-size: 20px;
}
.goods_info {
  margin-top: 20px;
  background-color: #fff;
}

.info_title {
  font-size: 32px;
  padding: 10px 30px;
  color: #323232;
}

.good_detail {
  width: 750px;
  height: 1488px;
  margin-bottom: 100px;
}

.info-box {
  width: 750px;
  /* padding: 20px; */
  background-color: #fff;
  /* margin-bottom: 20px; */
}

.goods_top {
  flex-direction: row;
  justify-content: space-between;
  padding: 10px 32px;
  padding-bottom: 5px;
  /* margin-top: 20px; */
}

.top_left {
  flex-direction: row;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
}

.collections {
  justify-content: center;
  align-items: center;
  color: #999;
  flex-direction: row;
  height: 60px;
}

.collecIcon {
  font-size: 32px;
  margin-right: 5px;
  color: #999;
}
.collecIconTxt {
  margin-left: 10px;
  font-size: 20px;
}

.isKeep {
  font-size: 32px;
  color: #ea464f;
}

.colectip {
  font-size: 20px;
  color: #666;
}

.goods_cul {
  margin-left: 50px;
  border-width: 2px;
  border-style: solid;
  border-color: #bb8732;
  padding: 10px 20px;
  border-radius: 50px;
  color: #bb8732;
  height: 47px;
}

.priceSymbol {
  font-size: 22px;
  color: #ea464f;
}

.goods-info-price {
  font-size: 38px;
  font-weight: 600;
  color: #ea464f;
  margin-right: 9px;
}

.goods-old_price {
  color: #ea464f;
  font-size: 24px;
  text-decoration: line-through;
}
.detailBox {
  width: 750px;
  padding: 24px 32px 32px;
  font-size: 26px;
  background-color: #fff;
  margin-top: 20px;
}
.description {
  font-size: 28px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(30, 30, 30, 1);
  height: 40px;
  margin-bottom: 16px;
}
.goodInfo-title {
  padding: 0 32px;
  font-size: 28px;
  color: #333333;
  flex: 1;
}
.labeltab {
  flex-direction: row;
  padding: 10px 32px;
}
.textAtea {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 10px 32px;
}
.Brandnew {
  display: inline;
  font-size: 20px;
  color: #ffffff;
  letter-spacing: 2px;
  background-color: #c91a1a;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  border-radius: 2px;
  margin-right: 10px;
  border-radius: 5px;
}
.goods-info-title {
  color: rgba(51, 51, 51, 1);
  line-height: 30px;
  background-color: #fff;
  font-size: 22px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}

.delivery {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #ede8e6;
  flex-direction: row;
  padding: 20px 0;
  background-color: #fff;
}

.h100 {
  height: 100px;
  align-items: center;
}

.mt20 {
  margin-top: 20px;
}

.de_title {
  color: #9a9999;
  width: 200px;
  padding-left: 32px;
  font-size: 28px;
}

.de_cont {
  font-size: 32px;
  color: #1e1e1e;
  font-size: 28px;
  padding-left: 20px;
}

.userInfo {
  width: 686px;
  flex-direction: row;
  padding: 20px 0;
  background-color: #fff;
  margin: 10px 32px;
  align-items: center;
  /* border-width: 1px;
  border-style: solid;
  border-color: #e8e8e8; */
}

.userAvator {
  width: 94px;
  height: 94px;
  border-radius: 47px;
  background-color: #f2f2f2;
}

.userCenter {
  flex: 1;
  padding-right: 30px;
  padding-left: 20px;
  height: 80px;
  justify-content: space-between;
}

.userRight {
  padding: 10px;
  flex-direction: row;
}

.stroll {
  font-size: 24px;
  color: #676665;
  margin-right: 15px;
}

.strollIcon {
  font-size: 24px;
  color: #676665;
}

.userAccount {
  flex-direction: row;
  justify-content: space-between;
}

.userName {
  font-size: 34px;
}
.tagoffice {
  font-family: PingFangSC-Medium;
  font-size: 20px;
  color: #e5b629;
  letter-spacing: 0;
}
.officeIcon {
  width: 24px;
  height: 24px;
  margin-left: 20px;
  margin-right: 10px;
}

.credit {
  color: #41eff2;
  margin-left: 20px;
}

.row_title {
  color: #9a9999;
  font-size: 26px;
  margin-right: 15px;
}

.row_num {
  color: #323232;
  font-size: 26px;
}

.footer {
  width: 750px;
  padding: 0 20px;
  height: 100px;
  border-top-color: #edeaea;
  border-top-width: 1px;
  border-top-style: solid;
  background-color: #fff;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}

.foot_icons {
  flex: 1;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
}

.iconsbox {
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: row;
}
.contact {
  background-color: #000;

  border-radius: 10px;
}

.bright {
  border-right-color: #dad7d8;
  border-right-style: solid;
  border-right-width: 1px;
}

.boxright {
  width: 260px;
  height: 60px;
}

.textIcon {
  font-size: 32px;
  margin-right: 10px;
}
.contactIcon {
  color: #fff;
}
.boxtext {
  font-size: 28px;
}
.contactTxt {
  color: #fff;
}
.text {
  justify-content: center;
  width: 100%;
  font-size: 22upx;
  color: #666;
}

.btnBox {
  flex-direction: row;
  align-items: center;
}

.joinCart,
.buy {
  height: 70px;
  line-height: 68px;
  padding: 0 30px;
  color: #fff;
  font-size: 30px;
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
  min-width: 200px;
  text-align: center;
}

.joinCart {
  background-color: #fff;
  color: #bb8732;
  border-color: #bb8732;
  margin-right: 15px;
}

.buy {
  background-color: #303030;
  border-color: #303030;
  color: #fff;
}
.buy:active {
  background-color: #000;
}
.hidemask {
  height: 0;
}

.maskAlert {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 780px;
  top: 0;
  /* background-color: rgba(0, 0, 0, 0); */
}

.shopAlert {
  position: fixed;
  left: 0;
  bottom: -780px;
  width: 750px;
  height: 780px;
  background-color: #ffffff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  align-items: center;
  padding: 32px;
}

.alertTop {
  width: 750px;
  padding: 0 32px;
  flex-direction: row;
  flex-wrap: nowrap;
}

.goodsImg {
  width: 228px;
  height: 228px;
}

.goodsTit {
  flex: 1;
  height: 228px;
  position: relative;
  padding-left: 20px;
}

.alertClose {
  width: 44px;
  height: 44px;
  text-align: center;
  line-height: 44px;
  position: absolute;
  right: 0;
  font-size: 30px;
  color: #666666;
}

.rowPrice {
  flex-direction: row;
  align-items: center;
  margin-top: 15px;
}

.price {
  color: #ec414d;
  font-size: 36px;
}

.symbol {
  font-size: 22px;
  color: #ec414d;
  margin-right: 5px;
}

.intro {
  lines: 4;
  width: 426px;
  margin-top: 14px;
  color: #666666;
  font-size: 26px;
  line-height: 40px;
  text-overflow: ellipsis;
}

.alertScroll {
  flex: 1;
}

.styleBox {
  width: 686px;
  align-items: flex-start;
  padding-top: 20px;
  padding-bottom: 32px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #e8e8e8;
}

.styleTitle {
  color: #1e1e1e;
  font-size: 30px;
}

.itemBox {
  flex-direction: row;
  margin-top: 16px;
}

.styleItem {
  border-width: 2px;
  border-style: solid;
  border-color: #1e1e1e;
  color: #1e1e1e;
  border-radius: 5px;
  height: 56px;
  line-height: 56px;
  padding: 0 30px;
}

.styleActive {
  color: #ba8833;
  border-color: #ba8833;
}

.price-number {
  width: 686px;
  height: 100px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #e8e8e8;
}

.num-title {
  font-size: 30px;
  color: #1e1e1e;
}

.gnumber {
  flex-direction: row;
  align-items: center;
  height: 62px;
}

.numaction {
  width: 44px;
  height: 44px;
  /* background-color: #e7e7e7; */
  justify-content: center;
  align-items: center;
  border-width: 1px;
  border-style: dashed;
  border-color: #888888;
}

.numinputbox {
  width: 100px;
  background-color: #fdfeff;
}

.numinput {
  width: 100px;
  text-align: center;
  font-size: 44px;
  height: 62px;
  line-height: 62px;
  color: #ec414d;
}

.numIcon {
  color: #1e1e1e;
  font-weight: 600;
}
</style>
